<template>
	<div>
		<!-- banner -->
		<div class="message-banner" :style="{ backgroundImage: 'url(' + (getBarrage?.bgImagePath || bgUrl) + ')',
		backgroundRepeat: 'no-repeat' }">
			<!-- 弹幕输入框 -->
			<div class="message-container">
				<h1 class="message-title">留言板</h1>
				<div class="animated fadeInUp message-input-wrapper">
					<input v-model="messageContent" @click="show = true" @keyup.enter="addToList" placeholder="说点什么吧" />
					<button class="ml-3 animated bounceInLeft" @click="addToList" v-show="show">
						发送
					</button>
				</div>
			</div>
			<!-- 弹幕列表 -->
			<div class="barrage-container">
				<vue-baberrage :barrageList="barrageList">
					<template v-slot:default="slotProps">
						<span class="barrage-items">
							<img :src="slotProps.item.avatar" width="30" height="30" style="border-radius:50%" />
							<span class="ml-2">{{ slotProps.item.nickname }} &nbsp;:&nbsp;</span>
							<span class="ml-2">{{ slotProps.item.messageContent }}</span>
						</span>
					</template>
				</vue-baberrage>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue';
	import { mapGetters } from 'vuex'
	import {
		vueBaberrage,
		MESSAGE_TYPE
	} from 'vue-baberrage';
	Vue.use(vueBaberrage);
	export default {
		mounted() {
			this.listMessage();
		},
		data() {
			return {
				show: false,
				messageContent: "",
				barrageList: [],
				bgUrl: "https://blog-chen.oss-cn-shanghai.aliyuncs.com/bolg/2024-10-09/messsage.jpg"
			};
		},
		computed: {
			// 通过 mapGetters 辅助函数映射 getters 到组件的计算属性
			...mapGetters(['getBarrage'])
		},
		methods: {
			addToList() {
				if (this.messageContent.trim() == "") {
					this.$message.warning("留言不能为空")
					return false;
				}
				const userAvatar = this.$store.state.UserInfo.avatar ?
					this.$store.state.UserInfo.avatar :
					"https://gravatar.loli.net/avatar/d41d8cd98f00b204e9800998ecf8427e?d=mp&v=1.4.14";
				const userNickname = this.$store.state.UserInfo.nickname ?
					this.$store.state.UserInfo.nickname :
					"游客";
				var message = {
					avatar: userAvatar,
					nickname: userNickname,
					messageContent: this.messageContent.trim(),
					time: Math.floor(Math.random() * (10 - 7)) + 7
				};
				// this.barrageList.push(message);
				this.messageContent = "";
				this.$api.common.addMessage(message).then(res => {
					console.log(res);
					if (res.code == 200) {
						message.messageContent = res.data
						this.barrageList.push(message);
						this.$message.success("评论成功!")
					} else {
						this.$message.error(res.msg)
					}
				})
			},
			listMessage() {
				this.$api.common.findMessageList().then(res => {
					if (res.code == 200) {
						this.barrageList = res.data
					}
				})
			}
		}
	};
</script>

<style scoped>
	.message-banner {
		width: 100vw;
		height: 100vh;
		background-size: 100% 100%;
		position: fixed;
	}

	.message-title {
		color: #eee;
		animation: title-scale 1s;
	}

	.message-container {
		position: absolute;
		width: 360px;
		top: 35%;
		left: 0;
		right: 0;
		text-align: center;
		z-index: 5;
		margin: 0 auto;
		color: #fff;
	}

	.message-input-wrapper {
		display: flex;
		justify-content: center;
		height: 2.5rem;
		margin-top: 2rem;
	}

	.message-input-wrapper input {
		outline: none;
		width: 70%;
		border-radius: 20px;
		height: 100%;
		padding: 0 1.25rem;
		color: #00d0ff;
		border: #fff 1px solid;
	}

	.message-input-wrapper input::-webkit-input-placeholder {
		color: gray;
	}

	.message-input-wrapper button {
		outline: none;
		border-radius: 20px;
		height: 100%;
		padding: 0 1.25rem;
		border: #fff 1px solid;
	}

	.barrage-container {
		position: absolute;
		top: 50px;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(100% -50px);
		width: 100%;
	}

	.barrage-items {
		background: rgb(0, 0, 0, 0.7);
		border-radius: 100px;
		color: #fff;
		padding: 5px 10px 5px 5px;
		align-items: center;
		display: flex;
	}
</style>